<template>
  <button @click="clickMe">刷新事件</button>
  <VxeGrid class="my-table-row-height" v-bind="gridOptions" :loading="loading"></VxeGrid>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { VxeGridProps } from 'vxe-table'
import { VxeGrid } from 'vxe-table'
// 导入主题变量，也可以重写主题变量
import 'vxe-pc-ui/lib/style.css'
import 'vxe-table/lib/style.css'

interface RowVO {
  id: number
  name: string
  role: string
  sex: string
  age: number
  address: string
}

const loading = ref(false)
const clickMe = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}

const gridOptions = ref<VxeGridProps<RowVO>>({
  height: 600,
  border: true,
  showFooter: true,
  size: 'mini',
  columns: [
    { field: 'seq', type: 'seq', width: 70 },
    { field: 'name', title: 'Name' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
  ],
  footerData: [{ seq: '合计', name: '777', sex: '333', age: '111' }],
})
</script>

<style scoped>
.my-table-row-height {
  --vxe-ui-table-row-height-default: 80px;
  --vxe-ui-table-row-height-medium: 60px;
  --vxe-ui-table-row-height-small: 40px;
  --vxe-ui-table-row-height-mini: 20px;
}
</style>
